<template>
  <el-card class="main" style="">
    <div style="width: 100%;height: 600px;display: flex">
      <Map id="map" class="map components" @click.native="drawerOpen('map')"/>
      <List id="list" class="list components" @click.native="drawerOpen"/>
      <SunriseChart id="sunriseChart" class="sunriseChart components" @click.native="drawerOpen"/>
    </div>
    <div style="width: 100%;height:600px;display: flex">
      <RoseChart id="RoseChart" class="RoseChart"/>
      <RadarChart id="RadarChart" class="RadarChart"/>
      <AnscombQuartet id="AnscombQuartet" class="AnscombQuartet"/>
    </div>
    <div style="width: 100%;height:600px;display: flex">
      <MaximumTemperatureInstrumentPanel id="maximumTemperatureInstrumentPanel" class="maximumTemperatureInstrumentPanel"/>
      <AirQualityScoreDashboard id="AirQualityScoreDashboard" class="AirQualityScoreDashboard"/>
      <AirHumidityInstrumentPanel id="AirHumidityInstrumentPanel" class="AirHumidityInstrumentPanel"/>
    </div>
  </el-card>
</template>

<script>
import Map from './components/map.vue'
import List from './components/list.vue'
import SunriseChart from "./components/sunriseChart";
import MaximumTemperatureInstrumentPanel from "./components/MaximumTemperatureInstrumentPanel";
import AirQualityScoreDashboard from "./components/AirQualityScoreDashboard";
import AirHumidityInstrumentPanel from "./components/AirHumidityInstrumentPanel";
import RadarChart from "./components/radarChart";
import RoseChart from "./components/RoseChart";
import AnscombQuartet from "./components/AnscombQuartet";

export default {
  name: 'onlineEditing',
  components: {
    Map,
    List,
    SunriseChart,
    MaximumTemperatureInstrumentPanel,
    AirQualityScoreDashboard,
    AirHumidityInstrumentPanel,
    RadarChart,
    RoseChart,
    AnscombQuartet
  },
  methods: {
    drawerOpen(draw){
      this.$emit('drawerOpen',draw);
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  border: none;
}
::-webkit-scrollbar {
  width: 0;
}
.components:active{
  border:1px solid blue;
}
.components:hover{
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0.5;
}
.map{
  width: 50%;
  height: 600px;
}
.list{
  width: 20%;
}
.sunriseChart{
  width: 30%
}
.maximumTemperatureInstrumentPanel{
  width: 33%;
}
.AirQualityScoreDashboard{
  width: 33%;
}
.AirHumidityInstrumentPanel{
  width: 33%;
}
.RadarChart{
  width: 30%;
}
.RoseChart{
  width: 30%;
}
.AnscombQuartet{
  width: 40%;
}
</style>
